<template>
	<view class="container">
		<view class="example">
			<uni-forms ref="form" :model="form" labelWidth="80px">
				<uni-forms-item label="资产型号" name="model_id" required>
					<uni-data-picker :localdata="treeOptions" popup-title="请选择资产分类" 
					v-model="form.model_id" v-if="action == 'add'"></uni-data-picker>
					<uni-easyinput v-model="form.model_name" v-if="action != 'add'" disabled/>
				</uni-forms-item>
				<uni-forms-item label="采购数量" name="amount" required>
					<uni-easyinput v-model="form.amount" type="number" placeholder="请输入数量" :disabled="action == 'view'"/>
				</uni-forms-item>
				<uni-forms-item label="申请原由" name="reason" required>
					<uni-easyinput v-model="form.reason" type="textarea" autoHeight 
					placeholder="请输入你的申请原由" :disabled="action == 'view'"/>
				</uni-forms-item>
				<uni-forms-item label="采购说明" name="remark">
					<uni-easyinput v-model="form.remark" type="textarea" autoHeight 
					placeholder="请输入采购说明" :disabled="action == 'view'"/>
				</uni-forms-item>				
				<uni-forms-item label="审批人" name="checkUserId" required>
					<uni-data-select v-model="form.checkUserId" :localdata="userOptions" multiple></uni-data-select>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="save">保存并提交</button>
		</view>
	</view>
</template>

<script>
	import { handleTree, parseTime	} from '@/api/sys.js'
	import { apiGet, apiPost, apiPut, apiDs	} from '@/api/openapi'

	export default {
		data() {
			return {
				purchaseId: null,
				action: 'add',
				form: {},
				treeOptions:[],
				rules: {
					model_id: {
						rules: [{
							required: true,
							errorMessage: '型号不能为空'
						}]
					},
					amount: {
						rules: [{
							required: true,
							errorMessage: '数量不能为空'
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '申请原由不能为空'
						}]
					},
					checkUserId: {
						rules: [{
							required: true,
							errorMessage: '审批人不能为空'
						}]
					}
				},
				modelOptions: [],
				cateOptions: [],
				checkUsers: null,
				userOptions:[]
			}
		},
		onLoad(option) {			
			apiDs('app_user_select').then(response => {
				this.userOptions = response.data;
			})
			apiDs('app_model_tree').then(response => {
				this.treeOptions = handleTree(response.data, "value", "pid");
			});	
			this.reset();
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			reset() {
				this.form = {
					id: null,
					model_id: null,
					amount: 1,
					reason: null,
					remark: null,
					apply_status: '2',
					apply_time:'@now()',
					check_status: '1',
					checkUserId: null
				};
			},
			onnodeclick(e) {
				console.log(e);
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			save(ref) {
				this.$refs.form.validate().then(res => {
					let data = {"@tags": ['asset_purchase', 'asset_flow']};
					data['asset_purchase'] = this.form;
					
					let userName = null;
					for (var j = 0; j < this.userOptions.length; j++) {
						if (this.userOptions[j].value == this.form.checkUserId) {
							userName = this.userOptions[j].text;
						}
					}
					
					data['asset_flow'] = {
						"data_id":"@asset_purchase.id",
						"flow_model":'asset_purchase',
						"check_user_id": this.form.checkUserId,
						"check_user_name": userName
					};
					apiPost(data).then(response => {
					  this.$modal.msgSuccess("提交成功");
					  this.reset();
					});			
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>